<template>
	<view class="CartItem">
		<switch :checked="chosen" type="checkbox" />
		<image :src="pic" mode="widthFix"></image>
		<view class="goodsDetail">
			<view>{{title}}</view>
			<view>{{price}}</view>
			<view class="numChange">
				<navigator url="javascript:;">-</navigator>
				<input type="text" :value="num" disabled>
				<navigator url="javascript:;">+</navigator>
			</view>
		</view>
		<navigator url="javascript:;" class="removeItem">
			<image src="/static/image/shanchu.png" mode="widthFix"></image>
		</navigator>
	</view>
</template>

<script>
	export default {
		name:"CartItem",
		props:{
			num:{
				type:Number,
				default:1
			},
			title:{
				type:String,
				default:""
			},
			price:{
				type:Number
			},
			chosen:{
				type:Boolean,
				default:false
			},
			pic:{
				type:String
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less" scoped>
.CartItem{
	position: relative;
	display: flex;
	align-items: center;
	width: 100vw;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	background-color: #fff;
	border-bottom: 1px solid black;
	margin-bottom: 10rpx;
	switch{
		margin-left: 10rpx;
	}
	image{
		width: 250rpx;
		margin: 10rpx;
	}
	.goodsDetail{
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
		view{
			margin-bottom: 20rpx;
		}
		.numChange{
			display: flex;
			border: 1px solid black;
			margin-bottom: 0;
			input{
				text-align: center;
				width: 60rpx;
				height: 50rpx;
				border-right: 1px solid black;
				border-left: 1px solid black;
			}
			navigator{
				text-align: center;
				line-height: 50rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.removeItem{
		position: absolute;
		right: 20rpx;
		image{
			width: 60rpx;
		}
	}
}
</style>